<!--echarts 地图-->
<template>
  <div>
    <div id="echartsMap" :style="style"></div>
  </div>
</template>

<script setup>
import * as echarts from "echarts";
import china from "@/assets/mapJson/china.json";
const props = defineProps({
  // 容器的宽度
  width: {
    type: String,
    default: "100%",
  },
  // 容器的高度
  height: {
    type: String,
    default: "100%",
  },
});
// 计算属性 style
const style = computed(() => {
  return {
    width: props.width,
    height: props.height,
  };
});

const chartMap = ref(null);

const createChart = () => {
  // echarts 初始化
  chartMap.value = echarts.init(document.getElementById("echartsMap"));

  // 地图注册，第一个参数的名字必须和option.geo.map一致,第一个参数为配置设置的名称，第二个参数为引入的地图名称
  echarts.registerMap("china", china);

  chartMap.value.setOption(configurationItem());

  chartMap.value.off("click");
  //点击事件
  chartMap.value.on("click", function (params) {
    console.log("点击echarts地图", params);
  });
};

const configurationItem = () => {
  let option = null;
  option = {
    series: [
      {
        type: "map",
        map: "china",
        zoom: 1, // 默认显示级别
        layoutCenter: ["50%", "50%"], // 定义地图中心在屏幕中的位置
        layoutSize: "100%", // 相对于屏幕宽高的百分比
        roam: "scale", // 缩放'scale'或者平移'move'
        // aspectScale: 1.5, // scale 地图的长宽比
        // 地图区域的样式设置
        itemStyle: {
          normal: {
            // 静态的时候展示样式
            areaColor: "#07121D", //地图区域的颜色
            borderColor: "#206BF5",
            borderWidth: 1,
            shadowColor: "#07121D", //阴影颜色
            shadowBlur: 20,
            shadowOffsetX: -5,
            shadowOffsetY: 15,
          },
          emphasis: {
            areaColor: "#0A2250", //选中区域的背景色
          },
        },
        label: {
          normal: {
            // 通常状态下的样式
            show: true, //是否显示地图省份得名称
            textStyle: {
              color: "#dedee7", // 区域文字 颜色
              fontSize: 14,
            },
          },
          // 鼠标放上去的样式
          emphasis: {
            //动态展示的样式
            color: "#faf4f4", //选中区域的字体颜色
            show: true,
            textStyle: {
              fontSize: 16,
            },
          },
        },
        // 选中状态下的多边形和标签样式
        select: {
          itemStyle: {
            areaColor: "#0A2250", //选中区域的背景色
          },
          label: {
            show: true,
            color: "#faf4f4",
          },
        },
        // selectedMode: 'single',  //默认一个选中
        // data: [
        //   { name: '北京市', selected: true }  // selected:true 默认选中
        // ],
      },
    ],
  };
  return option;
};
const resizeEchart = () => {
  if (chartMap.value) {
    chartMap.value.resize(); // 调用ECharts的resize方法
  }
};

onMounted(() => {
  createChart();
  window.addEventListener("resize", resizeEchart);
});
onUnmounted(() => {
  window.removeEventListener("resize", resizeEchart);
  chartMap.value.dispose();
  chartMap.value = null;
  // console.log("🚀 ~ chartMap.value -->", chartMap.value)
});
</script>

<style lang="scss" scoped></style>
